<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Frontend Toolkit - 默认服务目录</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            max-width: 600px;
            margin: 80px auto;
            padding: 20px;
            background: #f8fafc;
            color: #2d3748;
        }

        .header {
            text-align: center;
            margin-bottom: 40px;
        }

        .logo {
            font-size: 3em;
            margin-bottom: 16px;
        }

        .card {
            background: white;
            border-radius: 12px;
            padding: 24px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }

        .success {
            color: #10b981;
            font-weight: 600;
        }

        .directory {
            background: #f3f4f6;
            padding: 8px 12px;
            border-radius: 6px;
            font-family: monospace;
        }
    </style>
</head>

<body>
    <div class="header">
        <div class="logo">🚀</div>
        <h1>Frontend Toolkit</h1>
        <p class="success">✅ 静态文件服务器运行成功!</p>
    </div>

    <div class="card">
        <h3>🎯 服务信息</h3>
        <p><strong>服务目录:</strong> <span class="directory">./</span> (当前项目根目录)</p>
        <p><strong>当前端口:</strong> 3001 (热重载模式)</p>
        <p><strong>访问地址:</strong> <a href="http://localhost:3001">http://localhost:3001</a></p>
        <p><strong>🔥 热重载:</strong> <span style="color: #10b981; font-weight: bold;">已启用</span> - 文件变化时自动刷新</p>
    </div>

    <div class="card">
        <h3>🎨 功能特性</h3>
        <ul>
            <li>🔥 高性能 Rust 实现</li>
            <li>🌐 CORS 跨域支持</li>
            <li>📋 访问日志记录</li>
            <li>🏠 自动 index.html 路由</li>
            <li>⚡ 热重载功能 - 文件变化时自动刷新页面</li>
            <li>🔎 WebSocket 实时连接</li>
            <li>👀 文件监听 (HTML/CSS/JS/JSON)</li>
        </ul>
    </div>

    <div class="card">
        <h3>📚 使用方式</h3>
        <div class="directory">
# 使用默认配置（当前目录，端口3000）<br>
frontend-toolkit serve<br><br>

# 启用热重载模式<br>
frontend-toolkit serve --hot<br><br>

# 指定目录和端口<br>
frontend-toolkit serve -d ./dist -p 8080<br><br>

# 热重载 + 自定义端口<br>
frontend-toolkit serve --hot --port 3001<br><br>

# 查看帮助<br>
frontend-toolkit serve --help
        </div>
    </div>
</body>

</html>